<template>
	<div class="view_page userList">
		<el-card class="box-card">
			<!--卡片头部-->
			<div slot="header" class="clearfix">
				<!--左侧-->
				<div class="left">
					<div class="menu-title">
						图标管理
					</div>
				</div>
				<!--右侧-->
				<div class="right">
					<el-button type="primary" size="small" @click="navtoAdd('add')">新增
					</el-button>
				</div>
			</div>
			<!-- 卡片内容 -->
			<div>
				<!--筛选-->
				<div class="query-operate">
					<el-form class="demo-form-inline indoor-scene-buzhou-list-form" :inline="true" :model="TESTFROMDATA"
						@submit.native.prevent>
						<el-form-item
						  label="版本号"
						  label-width="120px"
						  style="margin-top: 5px; margin-bottom: 5px;"
						>
						  <el-input
						    clearable
						    @clear="searchList"
						    placeholder="请输入版本号"
						    v-model="TESTFROMDATA.version"
						    @keyup.native.enter="searchList()"
						  ></el-input>
						</el-form-item>
						<el-form-item
						  style="margin-top: 5px; margin-bottom: 5px;margin-left: 10px;"
						>
						  <el-button type="primary" @click="searchList()">查询</el-button>
						</el-form-item>
					</el-form>
				</div>
				<el-table :data="datalist" style="width: 100%">
					<!-- <el-table-column prop="id" label="ID" align="center" min-width="50">
          </el-table-column> -->
					<el-table-column prop="id" label="序号" align="center" min-width="50">
						<template slot-scope="scope">
							<div>
								{{ (pageNum - 1) * size + (scope.$index + 1) }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="file_name" label="名称(点击下载)" align="center" min-width="100">
                      <template slot-scope="scope">
                      	<div style="text-decoration: underline;color:#409eff ;" @click="doenloadfile(scope.row)">
                      		{{scope.row.file_name}}
                      	</div>
                      </template>
					</el-table-column>
					<el-table-column prop="remark" label="备注" align="center" min-width="200">
						<template slot-scope="scope">
							<el-popover width="" trigger="hover" placement="top" popper-class="u_my_popover">
								<div class="">
									{{scope.row.remark}}

								</div>
								<div slot="reference" class="name-wrapper remark" style="">
									{{scope.row.remark}}
								</div>
							</el-popover>
						</template>

					</el-table-column>
					<el-table-column prop="version" label="版本号" align="center" min-width="200">
					</el-table-column>
					<el-table-column prop="has_enable" label="是否启用" align="center" min-width="100">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.has_enable" @change="changestatus(scope.row)"
								inactive-color="#ff4949">
							</el-switch>
						</template>
					</el-table-column>





					<el-table-column fixed="right" label="操作" min-width="230" align="center">
						<template slot-scope="scope">
							<div style="display: flex;align-items: center;flex-wrap: wrap; ">
								<!-- <el-button
                  type="success"
                  size="small"
                  @click="lookfiles(scope.row.id)"
                  >详情
                </el-button> -->
								<el-button type="primary" size="small" @click="navtoAdd('update', scope.row)">修改
								</el-button>
								<!-- <el-button type="danger" size="small" @click="del(scope.row)"
                  >删除
                </el-button> -->
							</div>
						</template>
					</el-table-column>
				</el-table>
				<!--分页-->
				<pagination :total="total" :currentPage="pageNum" :pageSize="size" position="right"
					@search="searchPagination">
				</pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import axios from "axios";
	import qs from "qs";
	import {
		Message
	} from "element-ui";
	import pagination from "@/components/common/pagination/pagination";
	import devConfig from "*/dev.config";
	export default {
		components: {
			pagination
		},
		watch: {},
		data() {
			return {
				// userInfo: this.$apis.getqxbutton("设备列表"),
				// userInfo_id: JSON.parse(
				//   localStorage.getItem(this.$apis.getLocalKey().loginPersonnelInformation)
				// ).data.id,
				// 筛选内容
				TESTFROMDATA: {
					version:''
				},
				// 状态
				state: -1,
				stateList: [{
					id: -1,
					name: "全部"
				}],
				all_enable: [{
						id: true,
						name: '已启用'
					},
					{
						id: false,
						name: '未启用'
					}
				],

				// 列表的数据
				datalist: [],
				pageNum: 1,
				page: 1,
				size: 10,
				total: 0
			};
		},
		created() {
			this.getListPage();
			// this.getListPage();
		},
		mounted() {},
		methods: {
			//启用禁用
			changestatus(item) {
				var _this = this
				var datas = item
				// if(datas.has_enable==true){
				// 	datas.has_enable = false
				// }else{
				// 	datas.has_enable = true
				// }
				// console.log()
				_this.$apis.unity_icon_version_update(datas).then(res => {
					if (res.result == 0) {
						// Message.success('修改成功')
						_this.$nextTick(() => {
							_this.getListPage()
						})

					}
				})
			},
			//查询列表
			getListPage() {
				var _this = this;
				var datas = {
					// equipment_type: this.state,
				// TESTFROMDATA
					version: _this.TESTFROMDATA.version,
					page: _this.page,
					size: _this.size
				};
				_this.$apis.unity_icon_version_list(datas).then(res => {
					if (res.result == 0) {
						_this.datalist = res.data;
						_this.total = res.rows;
						_this.pageNum = res.page;
					}
				});
			},
			//模糊查询
			searchList() {
				this.page = 1;
				this.datalist = [];
				this.getListPage();
			},
			//分页
			searchPagination(page) {
				this.page = page;
				localStorage.setItem("page", page);
				this.getListPage();
			},
			// 跳转详情
			lookfiles(item) {
				var _this = this;
				var datas = {
					id: item
				};
				_this.$apis.safe_supervise_type_query(datas).then(res => {
					if (res.result == 0) {
						_this.$router.push({
							path: "/admin/siteType/siteTypeDetial",
							query: {
								data: res.data
							}
						});
					}
				});
			},
			//跳转新增
			navtoAdd(type, item) {
				var _this = this;
				if (type == "add") {
					_this.$router.push({
						path: "/admin/iconMessage/iconAdd",
						query: {
							type: type
						}
					});
				} else {
					_this.$router.push({
						path: "/admin/iconMessage/iconAdd",
						query: {
							type: type,
							// data: res.data
							data: JSON.stringify(item)
						}
					});
				}
			},
			del(item) {
				var _this = this;
				var datas = {
					id: item.id
				};
				_this
					.$confirm("确定要删除【" + item.name + "】吗?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						_this.$apis.safe_supervise_type_del(datas).then(res => {
							if (res.result == 0) {
								Message.success("删除成功");
								if (_this.page > 1 && _this.datalist.length <= 1) {
									_this.page = _this.page - 1;
								}
								_this.getListPage();
							}
						});
					})
					.catch(() => {});
			},
			doenloadfile(item){
				window.open(item.file_url);
			},
			download() {
				window.open("https://xiaoyoushengxue.com/2022051218194530.xlsx");
			},
			downloaddata() {
				var _this = this;

				window.open(
					devConfig.apiPrefix +
					"/excel/user_all_export?user_role=" +
					_this.TESTFROMDATA.type
				);
			}
		}
	};
</script>

<style>
	.el-table .cell {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal !important;
	}
	.remark{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>
